<template>
    <div>
        <el-dialog
                :title="title"
                :visible.sync="dialogVisible"
                :width="this.width"
                :destroy-on-close="true"
                :before-close="handleClose"
                @closed="closeEvent">
            <slot></slot>
            <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="onSubmit">确 定</el-button>
                </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: "Dialog",
    data() {
        return {
            dialogVisible: false,
        }
    },
    props: {
        width: {
            type: String,
            default: "40%"
        },
        title: {
            type: String,
            default: "添加"
        }
    },
    methods: {
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => {
                });
        },
        onOpen() {
            this.dialogVisible = !this.dialogVisible;
        },
        closeEvent() {
            this.$emit("reset")
        },
        onSubmit() {
            this.$emit("onSubmit")
        }
    },

}
</script>

<style scoped>

</style>